<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>查看</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <style type="text/css">
        .redstar {
            color: red;
            margin-right: 5px;
        }

        .layui-field-title {
            color: #ffffff;
        }
        .layui-input{
            width: 300px;
        }
        .layui-form-select{
            width: 300px;
        }

    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layuiBodyHeader">
            <span id="header" style="font-size: 18px;color: #aaaaaa;margin: 10px 0">数据资产目录>
<!--                <a href="javascript:" style="font-size: 18px;color: #aaaaaa;margin: 10px 0;">基础数据</a>>-->
            </span>
        </div>
        <fieldset class="layui-elem-field layui-field-title"></fieldset>
        <form class="layui-form" lay-filter="tableInfo" action="">
            <div class="layui-form-item">
                <div class="layui-tab layui-tab-card" lay-filter="tableConfigTab"
                     style="margin: unset;">
                    <ul class="layui-tab-title" style="z-index: 99999;">
                        <li lay-id="basicInfoTab" class="layui-this">基本信息</li>
                        <li lay-id="columnInfoTab">库表结构</li>
                        <li lay-id="collectionInfoTab">采集源信息</li>
                        <li lay-id="effectAnalyzeTab">影响分析</li>
                        <li lay-id="detailInfoTab">详细信息</li>
                        <li lay-id="graphDivTab">表图关系</li>
                    </ul>
                    <div class="layui-tab-content">
                        <!--基本信息-->
                        <div id="basicInfoTabItem" class="layui-tab-item layui-show">
                            <div class="layui-form-item" style="margin:10px 15px">
                                <button class="layui-btn" style="float: left" id="saveBasic" lay-submit
                                        lay-filter="submit">保存
                                </button>
                            </div>
                            <fieldset class="layui-elem-field layui-field-title" style="margin:10px 15px"></fieldset>

                            <div class="layui-form-item">
                                <label class="layui-form-label"><i class="redstar">*</i>表名</label>
                                <div class="layui-input-block" >
                                    <input class="layui-input" id="tableCode" name="tableCode">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label"><i class="redstar">*</i>表中文名</label>
                                <div class="layui-input-block" style=>
                                    <input class="layui-input" id="tableName" name="tableName">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label"><i class="redstar">*</i>来源</label>
                                <div class="layui-input-block" >
                                    <input class="layui-input" id="source" name="source">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">描述</label>
                                <div class="layui-input-block">
                                    <textarea class="layui-input" id="remark" name="remark"></textarea>
                                </div>
                            </div>
                        </div>
                        <!--库表结构-->
                        <div id="columnInfoTabItem" class="layui-tab-item">
                            <div class="layui-form-item" style="margin:10px 15px">
                                <button id="addColumn" class="layui-btn" style="float: left" >新增</button>
                            </div>
                            <fieldset class="layui-elem-field layui-field-title" style="margin:10px 15px"></fieldset>
                            <table class="layui-table" id="columnIndexTable" lay-filter="columnIndexTable"></table>
                        </div>
                        <!--采集源信息-->
                        <div id="collectionInfoTabItem" class="layui-tab-item">
                            <div class="layui-form-item" style="margin:10px 15px">
                                <button class="layui-btn" style="float: left" id="addCollectInfo" lay-submit
                                        lay-filter="submit">新增
                                </button>
                            </div>
                            <fieldset class="layui-elem-field layui-field-title" style="margin:10px 15px"></fieldset>
                            <table class="layui-table" id="collectInfoIndexTable" lay-filter="collectInfoIndexTable"></table>
                        </div>
                        <!--影响分析-->
                        <div id="effectAnalyzeTabItem" class="layui-tab-item">
                            <table class="layui-table" id="citedIndexTable" lay-filter="citedIndexTable"
                                   style="padding: 5px 3px 4px 5px;border: 1px solid #e7eaef"></table>
                        </div>
                        <!--详细信息-->
                        <div id="detailInfoTabItem" class="layui-tab-item">
                            <table class="layui-table" id="detailIndexTable" lay-filter="detailIndexTable"
                                   style="padding: 5px 3px 4px 5px;border: 1px solid #e7eaef"></table>
                        </div>
                        <!--表图关系-->
                        <div id="graphDivTabItem" class="layui-tab-item" style="position:relative;height: 3000px">
                            <div style="width: 1500px;height: 3000px;position: absolute;top:13%;left:50%;transform: translateX(-50%) translateY(-50%)" id="tableGraph"></div>
                        </div>
                    </div>
                </div>
            </div>
<!--            <div style="text-align: right;margin-top: 20px" class="layui-form-item">-->
<!--                <button id="yes" class="layui-btn layui-btn-primary yes">确定</button>-->
<!--            </div>-->
        </form>

    </div>
</div>
<script type="text/html" id="columnTableBar">
    <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-xs data-btn-edit" lay-event="edit"
       style="color: #2667DF;border: 0;background: 0%;padding: 0;">编辑</a>
    <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-xs data-btn-delete" lay-event="delete"
       style="color: #2667DF;border: 0;background: 0%;margin-left: 16px;padding: 0;">删除</a>
</script>
<script type="text/html" id="citedTableBar">
    {{#  if(d.isChange == 'T'){ }}
    <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-xs data-btn-detail" lay-event="detail"
       style="color: #2667DF;border: 0;background: 0%;margin-left: 16px;padding: 0;">详情</a>
    {{#  } }}
</script>



<script src="../lib/layui/layui.js" charset="utf-8"></script>
<script src="../js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script src="../echarts/js/echarts.js" type="text/javascript" charset="utf-8"></script>
<script src="../echarts/js/infographic.js" type="text/javascript" charset="utf-8"></script>
<script src="../echarts/js/configuration.js" type="text/javascript" charset="utf-8"></script>

<script>
    layui.use(['element', 'form', 'table', 'laypage'], function () {
        var $ = layui.jquery,
            laypage = layui.laypage;
        element = layui.element;
        form = layui.form;
        table = layui.table;

        var modelId = getUrlParams('modelId'),
            modelName = getUrlParams('modelName'),
            tableId = getUrlParams('tableId'),
            tableCode = getUrlParams('tableCode'),
            tableName = getUrlParams('tableName'),
            source = getUrlParams('source'),
            remark = getUrlParams('remark'),
            length = getUrlParams('length');

        var myChart = echarts.init(document.getElementById('tableGraph'));

        $(document).ready(function () {
            var str = '<a href="./dataMenuIndex.html?backNodeId='+modelId+'" style="text-decoration: underline;font-size: 18px;color: #aaaaaa;margin: 10px 0;">'+modelName+'</a>>'+
                      '<a style="font-size: 18px;color: #942a25;margin: 10px 0;">'+tableName+'</a>';
            $('#header').append(str);
            form.val('tableInfo',{
                tableCode:tableCode,
                tableName:tableName,
                // source:source,
                // remark:remark
            });
            if(remark!=='null'){
                form.val('tableInfo',{
                   remark:remark
                });
            }
            if(source!=='null'){
                form.val('tableInfo',{
                    source:source,
                });
            }
            renderColumnInfo(tableId);
            renderCitedTable(tableId);
            renderCollectInfo(tableId);
            renderTableDetail(tableCode)
            //表图关系
            makeGraphObj(tableCode);
        });

        /**
         * 保存基本信息更改
         */
        $('#saveBasic').click(function (){
            var result = {tableId:tableId,tableCode:tableCode,tableName:tableName,source:source,remark:remark};
            $.ajax({
                type: "post",
                url: "/baseDataManagerServer/modelTable/updateModelTable",
                dataType: 'json',
                cache: false,
                contentType: "application/json",
                data: JSON.stringify(result),
                success: function (redata) {
                    if (redata.code === '0000') {
                        layer.msg(redata.msg,{icon:1});
                        // window.parent.postMessage('update_success-' + redata.msg, '*');
                    } else if (redata.code === '9999') {
                        layer.msg(redata.msg,{icon:2})
                        // window.parent.postMessage('update_error-' + redata.msg, '*');
                    }
                },
                error: function (redata) {
                    // window.parent.postMessage('update_error', '*');
                }
            });


        });

        /**
         * 新增字段
         */
        $('#addColumn').click(function (){
            var addColumn = layer.open({
                title: '新增字段',
                id: 'addColumnLayer',
                type: 2,
                shade: 0.2,
                btn: ['保存','关闭'],
                // resize: false,
                shadeClose: true,
                area: ['40%', '60%'],
                content: './dpAddColumn.html?tableId='+tableId,
                success: function(layero) {
                },
                yes: function(index) {
                    //变灰禁用按钮
                    $('.layui-layer-iframe .layui-layer-content iframe')[0].contentWindow.postMessage('submit', '*');
                    // $('#layui-layer-iframe'+index).contentWindow.postMessage('submit', '*');

                    window.addEventListener('message', function(event) {
                        var eventData = event.data;
                        var res = eventData.split('-');
                        if (res[0] === 'success') {
                            layer.alert(res[1], function(index) {
                                table.reload('columnIndexTable',{});
                                layer.close(index);
                            });
                            layer.close(index);
                        } else if (res[0] === 'error') {
                            layer.alert("新增字段失败，请重试", function(index) {
                                layer.close(index);
                            });
                        }
                    });
                }
            });
            $(window).on("resize", function() {
                layer.full(addColumn);
            });
            return false;
        });
        /**
         * 新增采集信息
         */
        $('#addCollectInfo').click(function (){
            var addColumn = layer.open({
                title: '新增采集信息',
                id: 'addCollectLayer',
                type: 2,
                shade: 0.2,
                btn: ['保存','关闭'],
                // resize: false,
                shadeClose: true,
                area: ['40%', '60%'],
                content: './dpAddCollectorInfo.html?tableId='+tableId,
                success: function(layero) {
                },
                yes: function(index) {
                    //变灰禁用按钮
                    $('.layui-layer-iframe .layui-layer-content iframe')[0].contentWindow.postMessage('submit', '*');
                    // $('#layui-layer-iframe'+index).contentWindow.postMessage('submit', '*');

                    window.addEventListener('message', function(event) {
                        var eventData = event.data;
                        var res = eventData.split('-');
                        if (res[0] === 'success') {
                            layer.alert(res[1], function(index) {
                                table.reload('collectInfoIndexTable',{});
                                layer.close(index);
                            });
                            layer.close(index);
                        } else if (res[0] === 'error') {
                            layer.alert("新增采集信息失败，请重试", function(index) {
                                layer.close(index);
                            });
                        }
                    });
                }
            });
            $(window).on("resize", function() {
                layer.full(addColumn);
            });
            return false;
        });



        /**
         * 监听字段表操作
         */
        table.on('tool(columnIndexTable)',function (obj){
            var data = obj.data,
                event = obj.event;
            if(event==='edit'){
                var editColumn = layer.open({
                    title: '新增字段',
                    id: 'editColumnLayer',
                    type: 2,
                    shade: 0.2,
                    btn: ['保存','关闭'],
                    // resize: false,
                    shadeClose: true,
                    area: ['40%', '60%'],
                    content: './dpAddColumn.html?tableId='+tableId+'&columnId='+data.columnId+'&columnCode='+data.columnCode+
                             '&columnName='+data.columnName+'&type='+data.type+'&modelSize='+data.modelSize+'&modelFloat='+
                             data.modelFloat+'&modelDefault='+data.modelDefault+'&isNull='+data.isNull+'&isPrimary='+data.isPrimary,
                    success: function(layero) {
                    },
                    yes: function(index) {
                        //变灰禁用按钮
                        $('.layui-layer-iframe .layui-layer-content iframe')[0].contentWindow.postMessage('submit', '*');
                        // $('#layui-layer-iframe'+index).contentWindow.postMessage('submit', '*');

                        window.addEventListener('message', function(event) {
                            var eventData = event.data;
                            var res = eventData.split('-');
                            if (res[0] === 'update_success') {
                                layer.alert(res[1], function(index) {
                                    table.reload('columnIndexTable',{});
                                    layer.close(index);
                                });
                                layer.close(index);
                            } else if (res[0] === 'update_error') {
                                layer.alert("编辑字段失败，请重试", function(index) {
                                    layer.close(index);
                                });
                            }
                        });
                    }
                });
                $(window).on("resize", function() {
                    layer.full(editColumn);
                });
            }else if(event==='delete'){
                layer.confirm('确定删除此条数据?', {
                    title: '提示'
                }, function(index) {
                    if(length>0){
                        layer.msg("已被引用，不允许删除",{icon:2});
                    }else{
                        $.ajax({
                            type: "post",
                            url: "/baseDataManagerServer/modelTableColumn/deleteModelColumn?columnId="+data.columnId,
                            dataType: 'json',
                            cache: false,
                            contentType: "application/json",
                            // data: JSON.stringify({'columnId':data.columnId}),
                            success: function(redata) {
                                // layer.alert(redata.message);
                                if (redata.code === '0000') {
                                    obj.del();
                                    layer.msg(redata.msg,{icon:1});
                                    // layer.alert("删除成功");
                                }else if(redata.code==='9999'){
                                    layer.msg(redata.msg,{icon:2});
                                }
                                layer.close(index);
                            }
                        });
                    }
                });
            }
        });

        /**
         * 监听采集信息表操作
         */
        table.on('tool(collectInfoIndexTable)',function (obj){
            var data = obj.data,
                event = obj.event;
            if(event==='edit'){
                var editCollect = layer.open({
                    title: '编辑采集信息',
                    id: 'editCollectLayer',
                    type: 2,
                    shade: 0.2,
                    btn: ['保存','关闭'],
                    // resize: false,
                    shadeClose: true,
                    area: ['40%', '60%'],
                    content: './dpAddCollectorInfo.html?id='+data.id+'&tableId='+tableId+'&datasourceId='+data.datasourceId+'&year='+data.year+
                        '&fromTable='+data.fromTable+'&description='+data.description+'&datasourceName='+data.datasourceName+'&fromTableName='+data.fromTableName,
                    success: function(layero) {
                    },
                    yes: function(index) {
                        //变灰禁用按钮
                        $('.layui-layer-iframe .layui-layer-content iframe')[0].contentWindow.postMessage('submit', '*');
                        // $('#layui-layer-iframe'+index).contentWindow.postMessage('submit', '*');

                        window.addEventListener('message', function(event) {
                            var eventData = event.data;
                            var res = eventData.split('-');
                            if (res[0] === 'update_success') {
                                layer.alert(res[1], function(index) {
                                    table.reload('collectInfoIndexTable',{});
                                    layer.close(index);
                                });
                                layer.close(index);
                            } else if (res[0] === 'update_error') {
                                layer.alert("编辑采集信息失败，请重试", function(index) {
                                    layer.close(index);
                                });
                            }
                        });
                    }
                });
                $(window).on("resize", function() {
                    layer.full(editCollect);
                });
            }else if(event==='delete'){
                layer.confirm('确定删除此条数据?', {
                    title: '提示'
                }, function(index) {
                    $.ajax({
                        type: "post",
                        url: "/baseDataManagerServer/modelCollectInfo/deleteModelCollectInfo?id="+data.id,
                        dataType: 'json',
                        cache: false,
                        contentType: "application/json",
                        // data: JSON.stringify({'id':data.id}),
                        success: function(redata) {
                            // layer.alert(redata.message);
                            if (redata.code === '0000') {
                                obj.del();
                                layer.msg(redata.msg,{icon:1});
                                // layer.alert("删除成功");
                            }else if(redata.code==='9999'){
                                layer.msg(redata.msg,{icon:2});
                            }
                            layer.close(index);
                        }
                    });
                });
            }
        });

        /**
         * 监听引用表操作
         */
        table.on('tool(citedIndexTable)',function (obj){
            var data = obj.data,
                event = obj.event;
            if(event==='detail'){
                var detail = layer.open({
                    title: '详情',
                    id: 'detailLayer',
                    type: 2,
                    shade: 0.2,
                    btn: ['确定'],
                    // resize: false,
                    shadeClose: true,
                    area: ['80%', '60%'],
                    content: './dpChangeLog.html?id='+data.id,
                    success: function(layero) {
                    },
                });
                $(window).on("resize", function() {
                    layer.full(detail);
                });
            }
        });

        /**
         * 加载库表结构
         */
        function renderColumnInfo(tableId){
            var columnTable = table.render({
                elem: '#columnIndexTable',
                skin: 'row',
                method:'get',
                url: '/baseDataManagerServer/modelTableColumn/listModelColumnPage',
                where:{
                    tableId:tableId
                },
                parseData:function (res){
                    return{
                        code:res.code,
                        data:res.data,
                        msg:res.msg,
                        count:res.count
                    }
                },
                cols: [
                    [{type: "checkbox", class: 'checkbox', width: 50},
                        {type: 'numbers', width: 50, title: '序号'},
                        {field: 'columnCode',  title: '字段名'},
                        {field: 'columnName',  title: '字段中文名'},
                        {field: 'type', width: 200, title:'类型',templet:function (d){
                                var str ='';
                                if(d.type==='1'){
                                    str='字符';
                                }else if(d.type==='2'){
                                    str='数字';
                                }else if(d.type==='3'){
                                    str='时间';
                                }
                                return str;
                            }},
                        // {field: 'modelSize', width: 120, title: '长度'},
                        // {field: 'modelFloat',width: 100,title: '小数'},
                        // {field: 'isNull',width: 100,title: '是否可为空',templet:function (d){
                        {field: 'modelSize', title: '长度'},
                        {field: 'modelFloat',title: '小数'},
                        {field: 'isNull',title: '是否可为空',templet:function (d){
                                var str='';
                            if(d.isNull==='T'){
                                str='是';
                            }else if(d.isNull==='F'){
                                str='否';
                            }
                            return str;
                            }},
                        {field: 'modelDefault',title: '默认值'},
                        // {field: 'tableId',width: 100,title: '关联主数据'},
                        {title:'操作', width: 150, toolbar:'#columnTableBar'}
                    ]
                ],
                page:true,
                request:{
                    pageName:'page',
                    limitName:'pageSize'
                },
                done: function(res, curr, count) { // 表格渲染完成之后的回调
                    res.data.forEach(function(item, index) {
                        if (index % 2 === 0) {
                            $(".layui-table tbody tr[data-index='" + index + "']").css("background-color", "#FFFFFF");
                        } else {
                            $(".layui-table tbody tr[data-index='" + index + "']").css("background-color", "#F8F9FB");
                        }
                    });
                }
            });

        }

        /**
         * 加载采集信息表
         */
        function renderCollectInfo(tableId){
            var collectInfoTable = table.render({
                elem: '#collectInfoIndexTable',
                skin: 'row',
                method:'get',
                url: '/baseDataManagerServer/modelCollectInfo/listModelCollectInfoPage',
                where:{
                    tableId:tableId
                },
                parseData:function (res){
                    // console.log(res.data[0].datasourceName);
                    return{
                        code:res.code,
                        data:res.data,
                        msg:res.msg,
                        count:res.count
                    }
                },
                cols: [
                    [{type: "checkbox", class: 'checkbox', width: 50},
                        {type: 'numbers', width: 50, title: '序号'},
                        {field: 'year',  title: '年度'},
                        // {field: 'datasourceName',  title: '采集来源'},
                        // {field: 'fromTable', width: 200, title:'源表'},
                        // {field: 'description', width: 120, title: '采集规则描述'},
                        {field: 'datasourceName',  title: '分类'},
                        {field: 'fromTableName', title:'转换任务'},
                        {field: 'description', title: '采集规则描述'},
                        {title:'操作', width: 150, toolbar:'#columnTableBar'}
                    ]
                ],
                page:true,
                request:{
                    pageName:'page',
                    limitName:'pageSize'
                },
                done: function(res, curr, count) { // 表格渲染完成之后的回调
                    // console.log(res);
                    res.data.forEach(function(item, index) {
                        if (index % 2 === 0) {
                            $(".layui-table tbody tr[data-index='" + index + "']").css("background-color", "#FFFFFF");
                        } else {
                            $(".layui-table tbody tr[data-index='" + index + "']").css("background-color", "#F8F9FB");
                        }
                    });
                }
            });

        }

        /**
         * 加载引用表
         */
        function renderCitedTable(tableId){
            var citedTable = table.render({
                elem: '#citedIndexTable',
                skin: 'row',
                method:'get',
                url: '/baseDataManagerServer/modelTableLog/listModelTableLog',
                where:{
                    tableId:tableId
                },
                parseData:function (res){
                    return{
                        code:res.code,
                        data:res.data,
                        msg:res.msg,
                        count:res.count
                    }
                },
                cols: [
                    [{type: "checkbox", class: 'checkbox', width: 50},
                        {type: 'numbers', width: 50, title: '序号'},
                        {field: 'hierarchyName',  title: '层级'},
                        {field: 'sourceConfigName',  title: '数据源'},
                        // {field: 'tableName', width: 200, title:'表名'},
                        // {field: 'createDate', width: 180, title: '推送时间',},
                        // {field: 'isChange',width: 100,title: '变更情况',templet:function (d){
                        {field: 'tableName', title:'表名'},
                        {field: 'createDate', title: '推送时间',},
                        {field: 'isChange',title: '变更情况',templet:function (d){

                                var str='';
                            if(d.isChange==='T'){
                                str='是';
                            }else if(d.isChange==='F'){
                                str='否';
                            }
                            return str;
                            }},
                        {title:'操作', width: 150, toolbar:'#citedTableBar'}
                    ]
                ],
                page:true,
                request:{
                    pageName:'page',
                    limitName:'pageSize'
                },
                done: function(res, curr, count) { // 表格渲染完成之后的回调
                    res.data.forEach(function(item, index) {
                        if (index % 2 === 0) {
                            $(".layui-table tbody tr[data-index='" + index + "']").css("background-color", "#FFFFFF");
                        } else {
                            $(".layui-table tbody tr[data-index='" + index + "']").css("background-color", "#F8F9FB");
                        }
                    });
                }
            });

        }

        /**
         * 加载表基本信息
         */
        function renderTableDetail(tableCode) {
            var detailIndexTable = table.render({
                elem: '#detailIndexTable',
                skin: 'row',
                method:'get',
                url: '/baseDataManagerServer/modelTableDetailinfo/listTableDetailColumnPage',
                where:{
                    tableCode:tableCode
                },
                parseData:function (res){
                    return{
                        code:res.code,
                        data:res.data,
                        msg:res.msg,
                        count:res.count
                    }
                },
                cols: [
                    [{field: 'OWNER',  title: '用户'},
                        {field: 'TABLE_NAME',  title: '表名'},
                        {field: 'NUM_ROWS', title:'数据量'},
                        {field: 'TABLE_SIZE', title: '空间(MB)',},
                        {field: 'PARTITIONED',title: '是否分区表',templet:function (d){
                                var str='';
                                if(d.PARTITIONED=='YES'){
                                    str='是';
                                }else if(d.PARTITIONED=='NO'){
                                    str='否';
                                }
                                return str;
                            }},
                        {field: 'PARTITIONING_TYPE', width: 200, title:'分区方式'},
                        {field: 'PARTITION_COUNT', width: 180, title: '分区数'},
                        {field: 'PART_COLUMN', width: 180, title: '分区字段'},
                        {field: 'SUBPART_COLUMN', width: 180, title: '子分区字段'}
                    ]
                ],
                page:true,
                request:{
                    pageName:'page',
                    limitName:'pageSize'
                },
                done: function(res, curr, count) { // 表格渲染完成之后的回调
                    res.data.forEach(function(item, index) {
                        if (index % 2 === 0) {
                            $(".layui-table tbody tr[data-index='" + index + "']").css("background-color", "#FFFFFF");
                        } else {
                            $(".layui-table tbody tr[data-index='" + index + "']").css("background-color", "#F8F9FB");
                        }
                    });
                }
            });
        }

        //采集平台
        function makeGraphObj(tableCode){
            var linkValue = []
            var dataValue = []

            //ODS采集情况
            $.ajax({
                url: BASE_URL + "/sqlManager/mv/getViewName?tableName="+tableCode,
                dataType: 'json',
                contentType:'application/json',
                type: 'get',
                success: function(data) {
                    var data = data.data
                    if(null == data){
                        return;
                    }
                    var len = data.length
                    var x = 100;
                    var y = 100;
                    for(var i in data){
                        linkValue.push({
                            source: tableName,
                            target: data[i].mviewChinName
                        })
                        if(i != len/2){
                            if(i<len/2){
                                y = y + 200;
                            }else{
                                y = y - 200;
                            }
                        }
                        x = x + 400;

                        dataValue.push({
                            name : data[i].mviewChinName,
                            value: data[i].mviewName,
                            //value : data.tasks[i].task_name,
                            // y: 0,
                            // x: 600-(120 * data.tasks[i].level),
                            x: x,
                            y: y,
                            // itemStyle:{
                            //     normal:{color: red}
                            // }
                        })
                    }
                    x = len%2 == 0? (dataValue[len/2].x+dataValue[len/2-1].x)/2:100+400*(Math.ceil(len/2))
                    y = 0
                    dataValue.push({
                        name : tableName,
                        x: x,
                        y: 0,
                    })
                    $.ajax({
                        url: BASE_URL + "/baseDataManagerServer/modelCollectInfo/listModelCollectInfo?tableId=" + tableId,
                        dataType: 'json',
                        contentType: 'application/json',
                        type: 'get',
                        success: function (data) {
                            //getOritable(data)
                            if(data.length>1){
                                var x1 = x;
                                var y1 = y;
                                var len = data.length
                                for(var i in data){
                                    linkValue.push({
                                        source: tableName,
                                        target: data[i].fromTableName
                                    })
                                    if(i != len/2){
                                        if(i<len/2){
                                            y1 = y - 300;
                                        }else{
                                            y1 = y + 300;
                                        }
                                    }
                                    if(i%2==0){
                                        x1 = x - (500*(i/2+1));
                                    }else{
                                        x1 = x + (500*(Math.ceil(i/2)));
                                    }
                                    dataValue.push({
                                        name : data[i].fromTableName,
                                        x: x1,
                                        y: y1,
                                    })
                                    getOritable(data[i].fromTable,data[i].fromTableName,x1,y1,dataValue,linkValue)
                                }
                            }else{
                                for(var i in data){
                                    //getOritable1(data[i].fromTable,x,y,dataValue,linkValue)
                                    $.ajax({
                                        url: BASE_URL + "/dataCollection/count/getOritable.do?tablename=" + tableCode+'&tranid='+data[i].fromTable,
                                        dataType: 'json',
                                        contentType: 'application/json',
                                        type: 'get',
                                        success: function (data1) {
                                            var x1 = x;
                                            var y1 = y;
                                            for(var j in data1){
                                                var len = data1.length
                                                if(j != len/2){
                                                    if(j<len/2){
                                                        y1 = y1 - 200;
                                                    }else{
                                                        y1 = y1 + 200;
                                                    }
                                                }
                                                ;
                                                x1 = x-(Math.ceil(len/2)*400) + (400*(parseInt(j)+1));
                                                linkValue.push({
                                                    source: tableName,
                                                    target: data1[j].tablename
                                                })
                                                dataValue.push({
                                                    name : data1[j].tablename,
                                                    x: x1,
                                                    y: y1,
                                                })
                                            }
                                            console.log(dataValue,linkValue)
                                            makeGraphAjax(dataValue,linkValue);
                                        }
                                    })
                                }
                            }
                        }
                    })
                    makeGraphAjax(dataValue,linkValue);
                },
                error: function(data) {
                    // layui.msg(data.message);
                }
            });
        };

        //表图关系
        function makeGraphAjax(dataValue,linkValue){
            myChart.clear()
            myChart.off('click') // ！！在这里设置off，解决重复触发点击的问题
            var option = {};

            option = {
                title: {
                    text: 'Graph 简单示例'
                },
                tooltip: {},
                animationDurationUpdate: 1500,
                animationEasingUpdate: 'quinticInOut',
                series: [
                    {
                        type: 'graph',
                        layout: 'none',
                        symbolSize: 50,
                        roam: true,
                        label: {
                            show: true
                        },
                        edgeSymbol: ['circle', 'arrow'],
                        edgeSymbolSize: [4, 10],
                        edgeLabel: {
                            fontSize: 20
                        },
                        data: dataValue,
                        // links: [],
                        links: linkValue,
                        lineStyle: {
                            opacity: 0.9,
                            width: 2,
                            curveness: 0
                        }
                    }
                ]
            };
            myChart.setOption(option,true);

            //点击视图 更具视图查询表
            myChart.on("click", function (param){
                if(param.dataType == "node"){
                    layer.open({
                        title: '关联关系',
                        type: 2,
                        content: 'dataViewTable.html?tableCode='+param.data.value,
                        //content: $('#contentDom').html(), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        area: ['700px', '530px'],
                        maxmin: true,
                        cancel: function () {
                            layer.closeAll()
                        }
                    });
                }
            });

        }

        function getOritable(fromTable,fromTableName,x1,y1,dataValue,linkValue) {
            $.ajax({
                url: BASE_URL + "/dataCollection/count/getOritable.do?tablename=" + tableCode+'&tranid='+fromTable,
                dataType: 'json',
                contentType: 'application/json',
                type: 'get',
                success: function (data1) {
                    var x2 = x1;
                    var y2 = y1;
                    var len2 = data1.length
                    for(var j in data1){
                        if(j != len2/2){
                            if(j<len2/2){
                                y2 = y2-200;
                                //x2 = x1-(400*(Math.ceil(len2/2)-j));
                            }else{
                                y2 = y2+200;
                                //x2 = x1+(400*(Math.ceil(len2/2)-j));
                            }
                        }
                        x2 = x1-(Math.ceil(len2/2)*400) + (400*(parseInt(j)+1));
                        linkValue.push({
                            source: fromTableName,
                            target: data1[j].tablename
                        })
                        dataValue.push({
                            name : data1[j].tablename,
                            value: data1[j].tablename,
                            x: x2,
                            y: y2,
                        })
                    }
                    console.log(dataValue,linkValue)
                    makeGraphAjax(dataValue,linkValue);
                }
            })
        }

        function getOritable1(fromTable,x,y,dataValue,linkValue) {
            $.ajax({
                url: BASE_URL + "/dataCollection/count/getOritable.do?tablename=" + tableCode+'&tranid='+fromTable,
                dataType: 'json',
                contentType: 'application/json',
                type: 'get',
                success: function (data1) {
                    var x1 = x;
                    var y1 = y;
                    for(var j in data1){
                        var len = data1.length
                        if(j != len/2){
                            if(j<len/2){
                                y1 = y1 - 200;
                            }else{
                                y1 = y1 + 200;
                            }
                        }
                        x1 = x1 - 400;
                        linkValue.push({
                            source: tableCode,
                            target: data1[j].tablename
                        })
                        dataValue.push({
                            name : data1[j].tablename,
                            x: x1,
                            y: y1,
                        })
                    }
                    console.log(dataValue,linkValue)
                    makeGraphAjax(dataValue,linkValue);
                }
            })
        }

    });

    window.getUrlParams = function (key) {
        //获取url参数
        var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)", "i");
        var url = decodeURI(window.location.search)
        var r = url.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }
</script>

</body>
</html>

